<template>
  <!-- 设备统计模板 -->
  <!-- 右侧内容 -->

  <div>
    <gongyong @serchClick="serchClick" ref="gongyong" @resetClick="resetClick" :gongyongOption="gongyongOption">
      <!-- 顶部栏 -->
      <template #top-left>
        <div class="check_tab">
          <div :class="{'active':current === 0}" @click="checkTab(0)">多参数同时段
          </div>
          <div :class="{'active':current === 1}" style="margin-left:11px;" @click="checkTab(1)">同参数多时段</div>
        </div>
      </template>

      <template #top-right>
        <div class="block">
          <span class="date-text">时间</span>
          <el-date-picker size="mini" v-model="dateValue" type="daterange" range-separator="→" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" @change="dateChange" :clearable="false">
          </el-date-picker>
        </div>
      </template>

      <!-- 中间图表 -->
      <template #centre>
        <el-tabs v-model="activeName">
          <el-tab-pane label="曲线" name="first">
            <div ref="myChart" :style="{ width: '100%', height: scrollerHeight }" v-loading="loading"></div>
          </el-tab-pane>
          <el-tab-pane label="表格" name="second">
            <el-table :data="tableData" style="width: 100%" :height="tableHeight">
              <el-table-column prop="createDate" label="时间" align="center">
              </el-table-column>
              <el-table-column v-for="(item, index) in tableLabelList" :key="index" :prop="item[0]" :label="item[1]" align="center">
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </template>
    </gongyong>
  </div>
</template>

<script>
import gongyong from "../layout/gongyong.vue"; // 共用模板
import echarts from "echarts"; // 引入eahers
import deviceTable from "@/views/waterAnalysi/components/deviceTable.vue";
import derivedTbale from "@/views/waterAnalysi/components/derivedTbale.vue"; //导出Excel

import {
  selectPipePressure
} from "@/api/operationAnalysis/pipeAnalys";
export default {
  components: {
    gongyong,
    deviceTable,
    derivedTbale,
  },
  props: ["nodeData"],
  data () {
    return {
      current: 0, // 默认多参数同时段，2表示同参数多时段
      activeName: 'first',
      gongyongOption: {
        top: true,
        center: true,
        bottom: true,
        rest: true, // 重置按钮
      }, // 共用组件配置---------
      // 导出Excel---------
      but_derivedTbale: true,
      disabled: false,
      disabledImport: false,

      loading: true,
      dateValue: "", // 日期绑定
      suoS: {
        monitorPointId: "", // 监测点ID
        searchStartDate: "", // 日期绑定 开始时间
        searchEndDate: "", // 日期绑定 结束时间
      }, // 查询条件
      facilityData: [], // 设备统计列表
      facilityPillarData: [], // 设备统计柱状图
      Myecharts: {},
      // 数据列表的配置对象
      dataList: [
        {
          prop: "pumpsetName",
          label: "设备名称",
          id: 1,
        },
        {
          prop: "startDate",
          label: "开始时间",
          id: 2,
        },
        {
          prop: "endDate",
          label: "结束时间",
          id: 3,
        },
        {
          prop: "runTimeDouble",
          label: `运行时长  (h)`,
          id: 4,
        },
      ],
      tableStyle: {
        TableHight: "330",
      }, // table 表格组件高度
      displayType: 0,
      startDate: "2022-07-19",
      endDate: "2022-07-20",
      timeInterval: 10,
      params: [],
      pointList: [],
      colorArrList: ["#5B84F8", "#FAD337", "#5AD8A6", "#EA6247"], //线条颜色
      tableLabelList: []
    };
  },
  watch: {
    nodeData: {
      handler (val) {
        this.pointList = val
        debugger;
        this.handlePipePressure()
      },
      deep: true,
    },
  },
  created () { },
  mounted () {
    this.pointList = this.$parent.$parent.$parent.nodeData
    if (this.pointList.length != 0) {
      this.handlePipePressure()
      console.log(this.pointList)
      debugger;
    }
    // if (this.suoS.monitorPointId || this.$parent.$parent.$parent.nodeData.id) {
    //   this.$refs.gongyong.serchClick(); // 调用一次公共组件搜索按钮
    // } else {
    //   setTimeout(() => {
    //     this.$refs.gongyong.serchClick();
    //   }, 1000);
    // }
    this.newdata();
  },

  // 取出设备名称运行时长
  computed: {
    scrollerHeight: function () {
      return window.innerHeight - 357 + "px";
    },
    tableHeight: function () {
      return window.innerHeight - 357
    }
  },
  methods: {

    //切换数据
    checkTab (key) {
      this.displayType = key
      this.current = key
      this.$emit('checkFirst', key, this.pointList[0].monitorPointId, this.pointList[0].monitorPointName)

      // this.handlePipePressure(this.pointObj)
    },

    handlePipePressure () {
      this.pointList = [...new Set(this.pointList)]
      let obj
      if (this.current == 0) {
        obj = {
          displayType: this.displayType,
          startDate: this.startDate,
          endDate: this.endDate,
          timeInterval: this.timeInterval,
          params: this.pointList
        }
      }
      else {
        console.log(this.pointList)
        obj = {
          displayType: this.displayType,
          startDate: this.startDate,
          endDate: this.endDate,
          timeInterval: this.timeInterval,
          monitorPointId: this.pointList[0].monitorPointId
        }
      }
      let xData = []
      let yDataObj = {}
      let paramList = []
      this.pointList.map(item => {
        let param = "pipePressure" + item.monitorPointId
        paramList.push(param)
      })
      selectPipePressure(obj).then(response => {
        let tablelist = response.data
        this.tableLabelList = Object.entries(tablelist[0])
        if (this.current == 1) {
          this.tableLabelList.length = this.tableLabelList.length - 2
        }
        else {
          this.tableLabelList.length = this.tableLabelList.length - 1
        }
        this.tableData = tablelist
        this.tableData.map(item => {
          if (this.current == 0) {
            item.createDate = item.createDate
          }
          else {
            item.createDate = item.createDate0.slice(11)
          }
        })
        let dataList = response.data
        let Nlist = Object.keys(dataList[0])
        Nlist.map(it => {
          yDataObj[it] = []
        })
        dataList.map(item => {
          if (this.current == 0) {
            xData.push(item.createDate)
          }
          else {
            xData.push(item.createDate0.slice(11))
          }
          let aList = Object.keys(item)
          aList.map(it => {
            Nlist.map(i => {
              if (it == i) {
                yDataObj[i].push(item[i])
              }
            })
          })
        })
        xData.shift()
        if (this.current == 0) {
          delete yDataObj.createDate
        }
        else {
          delete yDataObj.createDate0
          delete yDataObj.createDate1
        }
        this.drawLine(xData, yDataObj)
        this.tableData.shift()
      }).catch(err => {
        console.log(err)
        debugger;
      })
    },

    newdata () {
      //获取当前时间
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      if (month < 10) {
        undefined;
        month = "0" + month;
      }
      if (day < 10) {
        undefined;
        day == "0" + day;
      }
      // this.suoS.searchStartDate = year += "-" + month + "-" + day;
      // this.suoS.searchEndDate = this.suoS.searchStartDate;
      this.suoS.searchStartDate = "2022-07-01"
      this.suoS.searchEndDate = "2022-07-15"
    },

    // 发请求获取统计数据前判断
    getStatistics () {
      console.log(this.suoS.monitorPointId);
      if (!this.suoS.monitorPointId) {
        console.log("请选择监测点");
        this.$message.error("请选择监测点");
        this.loading = false;

        return;
      }
    },

    // 日期选择
    dateChange () {
      console.log(this.dateValue);
      this.suoS.searchStartDate = this.dateValue[0];
      this.suoS.searchEndDate = this.dateValue[1];
      console.log("开始时间" + this.suoS.searchStartDate);
      console.log("结束时间" + this.suoS.searchEndDate);
    },

    // 搜索按钮触发事件
    async serchClick () {
      this.sendPostEquipstat();
      this.sendPostEquipstatlistAll();
    },

    drawLine (xData, yDataObj) {
      let yDataList = Object.entries(yDataObj)
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.myChart);
      // 绘制图表
      let option = {
        title: {
          text: '(MPa)',
          textStyle: {
            //文字颜色
            color: 'rgba(0, 0, 0, 0.45)',
            fontWeight: '400',
            //字体大小
            fontSize: 12
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisTick: {       //刻度线
            "show": false
          },
          axisLine: { // 轴线
            lineStyle: {
              color: 'rgba(0,0,0,0.65)'
            }
          },
          data: xData
        },
        yAxis: {
          type: 'value',
          axisLine: { // 轴线
            show: false,
            lineStyle: {
              color: 'rgba(0,0,0,0.45)'
            }
          },
          axisTick: {       //刻度线
            "show": false
          },
          splitLine: { //分割线
            lineStyle: {
              type: 'dashed',
              color: 'rgba(0,0,0,0.1)'
            }
          }
        },
        grid: {
          x: 60,
          x2: 35,
          y: 25,
          y2: 35,
        },
        series: [],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          x: "center", //可设定图例在左、右、居中
          y: "bottom", //可设定图例在上、下、居中
          padding: [20, 0, 0, 0],
        },
      };
      yDataList.map((item, index) => {
        let nA = item[1][0]
        item[1].shift()
        let obj = {
          name: nA,
          data: item[1],
          type: 'line',
          smooth: true,
          symbol: 'circle',//拐点样式
          symbolSize: 6,//拐点大小
          itemStyle: {
            color: this.colorArrList[index]//拐点颜色
          },
          lineStyle: {
            color: this.colorArrList[index] //线条颜色
          },
        }
        option.series.push(obj)
      })
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option, true);
      window.addEventListener("resize", function () {
        console.log(123);
        myChart.resize();
      });
    },
    // 点击重置按钮
    resetClick () {
      this.dateValue = "";
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-date-editor .el-range-separator {
  padding: 0px 0px;
}
.check_tab {
  color: rgba(0, 0, 0, 0.65);
  display: inline-block;
  font-size: 16px;
  height: 30px;
  line-height: 30px;
  div {
    cursor: pointer;
    display: inline-block;
    padding: 0 10px;
    border-radius: 2px 0px 0px 2px;
  }
  .active {
    color: #ffffff;
    background: #2d75ff;
  }
}
.date-text {
  font-size: 14px;
}
// .rightcontant {
//   width: 85.8%;
// }
// .rightcontant2 {
//   width: 97%;
// }
</style>
